<!--
 * @Date: 2021-09-02 11:32:14
 * @Author: 陶子
 * @LastEditTime: 2023-06-19 15:03:12
 * @FilePath: \jk_one-stop_pc\src\views\bigView\productionProcess\fullView.vue
 * @pageName: 这是--（工单进度大屏滚动列表）--页面
-->
<template>
  <div class='outBox'>
    <div class='body-cont'>
      <publicRoll ref='publicRoll' :rollData='listData' :showTopBox='false'>
        <div class='tableHeaderBox' slot='tableHeader'>
          <div class='tableOne'>工单编号</div>
          <div class='tableThree'>物品名称</div>
          <div class='tableSeven'>计划产量</div>
          <div class='tableSix'>计划完成时间</div>
          <div class='tableNine'>生产进度</div>
        </div>
        <div class='rowClass' slot='rowBox' slot-scope='{ item }' :class="item.overTime ? 'over-time-style' : ''">
          <div class='itemBoxOne'>{{ item.orderCode }}</div>
          <div class='itemBoxThree'>{{ item.serialName }}</div>
          <div class='itemBoxSeven'>{{ numFormat(item.planProduceNum) }}</div>
          <div class='itemBoxSix'>
            {{ moment(item.planStartTime).format('MM-DD').split('-').join('.') }} - {{
              moment(item.planEndTime).format('MM-DD').split('-').join('.') }}

            <!-- 今天已经过了，计划完成时间就显示 -->
<!--            v-if='item.planEndTime && item.overTime'-->
            <span class='over-time' v-if='item.planEndTime && item.overTime'>
              <!-- <a-icon type="warning" style="color:#f44747 ;font-size: 0.18rem;margin-right: 0.04rem" /> -->
              <img src='@/assets/work-order-images/over-time.png' alt=''
                   style='width: 0.2rem;;margin-right: 0.04rem' />超期
            </span>
          </div>
          <div class='itemBoxNine' :ref="'container_' + item.id" @mousedown='startDrag($event, item)'
               @mousemove='drag($event, item)' @mouseup='stopDrag($event, item)'>
            <div class='scrollable-content '>
              <div v-for='(processTask, idx) in item.processesVos' :key='idx' class='task-box'>
                <div class='task-item'>
                  <a-progress type='circle' :percent='processTask.percent * 1' :width='50'
                              :strokeColor='checkStockColor(processTask.percent * 1)'>
                    <div slot='format' class='format-text'>
                      <span>{{ processTask.percent }}%</span>
                    </div>
                  </a-progress>
                  <!-- <div class="gradient-line" v-if="idx != item.processesVos.length - 1"></div> -->
                  <img v-if='idx != item.processesVos.length - 1' src='@/assets/work-order-images/line.png' alt=''
                       style='width: 0.6rem;' />
                </div>
                <div class='process-name'
                     style='width: 80px;text-align: center;color: #4af0ff;font-size: 0.18rem;margin-top: 2px;font-weight: bold'>
                  {{ processTask.processesName }}
<!--                  测试工序名称-->
                </div>

              </div>
            </div>
            <!-- <a-icon type="double-left" id="prevButton" @click="prevButtonClick()" />
            <a-icon type="double-right" id="nextButton" @click="nextButtonClick()" /> -->
          </div>
        </div>
      </publicRoll>
    </div>
  </div>
</template>

<script>
import { numFormat } from '@/utils/util'
import { getProgressListBigScreen, queryByKey } from '@/api/productOrder'
import publicRoll from '../orderPublicRoll.vue' //公共滚动工单
import moment from 'moment'

export default {
  components: {
    publicRoll
  },
  watch: {},
  data() {
    return {
      numFormat,
      startScrollNum: 8,
      listData: [],
      resData: [],
      timeOut: 0,
      seter: null,
      isDragging: false,
      startX: 0,
      startScrollLeft: 0
    }
  },
  computed: {
    defaultOption() {
      let startScrollNum = this.startScrollNum
      return {
        step: 0.15, // 数值越大速度滚动越快
        limitMoveNum: startScrollNum, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 0 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.seter)
  },
  created() {
    this.getData()
    let timeObj = {
      key: 'bigScreenRefreshTime'
    }
    queryByKey(timeObj).then((res) => {
      if (res.code == 200) {
        this.timeOut = res.result
        this.createSet()
      } else {
        this.$antdMessage.error(res.message)
      }
    })

  },

  mounted() {

  },

  methods: {
    startDrag(e, item) {
      if (this.isDragging) return
      this.isDragging = true
      this.startX = e.clientX
      this.startScrollLeft = this.$refs['container_' + item.id].scrollLeft
    },
    drag(e, item) {
      if (!this.isDragging) return
      const diffX = this.startX - e.clientX
      const newScrollLeft = this.startScrollLeft + diffX
      this.smoothScroll(this.$refs['container_' + item.id], newScrollLeft)
    },
    stopDrag(e, item) {
      this.isDragging = false
    },
    smoothScroll(element, target) {
      element.scrollTo({
        left: target,
        behavior: 'smooth'
      })
    },

    // nextButtonClick() {
    //   const container = this.$refs.container
    //   // 滚动容器的宽度
    //   const scrollAmount = 500 // 单位像素
    //   const currentScrollLeft = container.scrollLeft
    //   const targetScrollLeft = Math.min(container.scrollWidth - container.clientWidth, currentScrollLeft + scrollAmount)
    //   this.smoothScroll(container, targetScrollLeft)
    // },
    // prevButtonClick() {
    //   const container = this.$refs.container
    //   // 滚动容器的宽度
    //   const scrollAmount = 500 // 单位像素
    //   const currentScrollLeft = container.scrollLeft
    //   const targetScrollLeft = Math.min(container.scrollWidth - container.clientWidth, currentScrollLeft - scrollAmount)
    //   this.smoothScroll(container, targetScrollLeft)
    // },
    // smoothScroll(element, target) {
    //   element.scrollTo({
    //     left: target,
    //     behavior: 'smooth'
    //   })
    // },
    moment,
    showI(num, index) {
      if (!num) {
        return false
      } else {
        let i = index
        return num / (i * 14.28) >= 1
      }
    },
    getData() {
      getProgressListBigScreen().then((res) => {
        if (res.code == 200) {
          this.listData = JSON.parse(JSON.stringify(res.result))
          this.listData.forEach(item => {
            if (item.processesVos && item.processesVos.length) {
              item.processesVos.forEach(el => {
                el.percent = 0
                if (el.processesPlanProduceNum > 0) {
                  el.percent = ((el.produceCount / el.processesPlanProduceNum) * 100).toFixed(0)
                }
                console.log(moment(item.planEndTime).endOf('day').valueOf(), '---', moment().endOf('day').valueOf())
                item.overTime = moment(item.planEndTime).endOf('day').valueOf() < moment().endOf('day').valueOf()
              })
            }
          })
          // this.listData.push({}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {})
          this.computedScrollNum(this.listData)
        } else {
          this.$antdMessage.error(res.message)
        }
      }).finally(() => {

      })
    },
    createSet() {
      this.seter = setInterval(() => {
        this.resData = []
        getProgressListBigScreen().then((res) => {
          if (res.code == 200) {
            this.resData = res.result
            if (this.listData.length < 8) {
              this.listData = JSON.parse(JSON.stringify(res.result))
              this.listData.forEach(item => {
                if (item.processesVos && item.processesVos.length) {
                  item.processesVos.forEach(el => {
                    el.percent = 0
                    if (el.processesPlanProduceNum > 0) {
                      el.percent = ((el.produceCount / el.processesPlanProduceNum) * 100).toFixed(0)
                    }
                  })
                }
              })
              this.resData = []
              this.computedScrollNum(this.listData)
            }
          } else {
            this.$antdMessage.error(res.message)
          }
        })
      }, this.timeOut)
    },
    ScrollEnd() {
      if (this.resData.length > 0) {
        this.listData = JSON.parse(JSON.stringify(this.resData))
        this.resData = []
        this.computedScrollNum(this.listData)
        this.$forceUpdate()
      }
    },
    computedScrollNum(checkData) {
      if (checkData.length > 8) {
        this.startScrollNum = checkData.length
      } else {
        let childrenLength = 0
        let moreNumber = 0
        for (let item of checkData) {
          childrenLength += item.progressList.length
          if (item.progressList.length > 5) {
            moreNumber++
          }
        }
        if (moreNumber > 0) {
          if (childrenLength > 25) {
            this.startScrollNum = checkData.length
          } else {
            this.startScrollNum = checkData.length + 1
          }
        } else {
          this.startScrollNum = checkData.length + 1
        }
      }
      this.$forceUpdate()
    },
    checkStockColor(value) {
      if (value === 0) {
        return '#DFDFDF'
      } else if (value > 0 && value < 100) {
        return '#1890FF'
      } else if (value === 100) {
        return '#00B042'
      } else if (value > 100) {
        return '#FF4D4F'
      }
    }
  }
}
</script>

<style scoped lang='less'>
.body-cont {
  background-color: rgba(3, 80, 143, .2);
  padding: 6px 1px;
}

/deep/ .livenessRoot .lastBox div.itemBox {
  padding: 0px !important;
  margin-top: 0.05rem;
  height: 1.2rem;
  background-color: rgba(3, 84, 143, .3);
}

.over-time {
  color: #f44747 !important;
  display: flex;
  padding: 2px 8px;
  background-color: #523346;
  border: 1px solid #f44747;
  border-radius: 4px;
  font-size: 0.18rem;
  margin-left: 0.04rem;
  align-items: center;

}

.gradient-line {
  // 由左向中间渐变色，再从中间向右渐变，左右两侧对称
  background: linear-gradient(90deg, #262c47, #1166a5, #13a5f0, #1166a5, #262c47);
  height: 5px;
  width: 1.0rem;
}

.flex(@jc, @ai, @fd: row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}

.itemBorderBox {
  margin-top: 0.25rem;
}

.outBox {
  box-sizing: border-box;
  padding: 0 0.23rem;
  height: 100%;


  div.itemBox {
    box-sizing: border-box;
    padding: 0.5rem 0.7rem 0.28rem 0.28rem;
    background-image: url('~@/assets/img/screen-p10.png');
    background-size: 100% 100%;
    background-position: center center;
    .flex(space-between, flex-start);

    div.itemLeft {
      width: 4.95rem;
      margin-right: 0.38rem;

      div.leftTopBox {
        .flex(space-between, center);
        font-size: 0.18rem;
        color: #ffffff;
        font-family: Microsoft YaHei;
        margin-bottom: 0.13rem;

        div.leftTopBox_left {
          font-size: 0.18rem;
          font-weight: bold;
        }

        div.leftTopBox_right {
          // .flex(flex-end,center);
          flex: 1;
          text-align: right;
        }
      }

      div.leftSecondBox {
        .flex(flex-start, flex-start);
        margin-bottom: 0.1rem;
        font-size: 0.14rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        // div.leftSecondBox_left {
        // }

        div.leftSecondBox_Right {
          flex: 1;
        }
      }

      div.rightCenter {
        border: 1px solid #91a9ff;
        height: 0.5rem;
        width: 100%;
        padding: 0.05rem 0.08rem 0.05rem 0.05rem;
        display: flex;
        align-items: center;
        position: relative;
        margin-bottom: 0.1rem;

        .centerChart {
          height: 0.3rem;
          display: flex;
          background-image: linear-gradient(to right, rgba(75, 243, 249, 0), rgba(75, 243, 249, 1));
          position: absolute;
          z-index: 1;
        }

        .centerBar {
          width: 100%;
          height: 0.3rem;
          display: flex;
          z-index: 2;
        }

        .barNum {
          height: 0.5rem;
          position: absolute;
          right: 0;
          padding-right: 0.08rem;
          font-size: 0.18rem;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #ffffff;
        }

        .barI {
          height: 100%;
          width: 14.28%;
          border-right: 0.1rem solid #011753;
        }
      }

      div.leftThirdBox {
        .flex(space-between, center);
        margin-bottom: 0.1rem;

        div.leftThirdBox_left {
          font-size: 0.14rem;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;

          span.blueColor {
            font-size: 0.18rem;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #4bf3f9;
            margin-left: 0.1rem;
            text-shadow: 0 0 0.1rem #4bf3f9, 0 0 0.02rem #4bf3f9, 0 0 0 #4bf3f9, 0 0 0 #4bf3f9;
          }
        }

        div.leftThirdBox_right {
          .flex(flex-start, center);
          width: 2.27rem;
          font-size: 0.14rem;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;

          span.greenColor {
            margin-left: 0.1rem;
            font-size: 0.18rem;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #4bf3f9;
            text-shadow: 0 0 0.1rem #4bf3f9, 0 0 0.02rem #4bf3f9, 0 0 0 #4bf3f9, 0 0 0 #4bf3f9;
          }
        }
      }

      div.leftLastBox {
        .flex(flex-start, center);
        font-size: 0.18rem;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #ffffff;

        .tagBox_Over {
          .flex(center, center);
          padding: 0.1rem;
          background-color: #eb2144;
          border-radius: 0.04rem;
        }

        .tagBox_off {
          .flex(center, center);
          padding: 0.1rem;
          background-color: #f6c223;
          border-radius: 0.04rem;
        }
      }
    }

    div.itemRight {
      flex: 1;
      .flex(flex-start, flex-start);
      flex-wrap: wrap;

      div.rightItemBox:nth-of-type(n + 5) {
        margin-top: 0.3rem;
      }

      div.rightItemBox {
        width: 4rem;
        height: 1.85rem;
        background-image: url('~@/assets/img/screen-p11.png'), url('~@/assets/img/screen-p12.png');
        background-size: 100% 100%;
        background-position: center center;
        .flex(space-between, center);
        box-sizing: border-box;
        padding: 0.2rem 0.4rem 0.2rem 0.2rem;
        // margin-bottom: 0.2rem;
        margin-right: 0.33rem;

        div.rightItemBxo_left {
          margin-right: 0.15rem;
          position: relative;

          .mycircle {
            width: 59px;
            height: 59px;
            border: solid 2px #91a9ff;
            border-radius: 50%;
            position: absolute;
            left: 10.5px;
            top: 10.5px;
          }

          .circletext {
            font-size: 0.26rem;
            font-family: Alimama ShuHeiTi;
            font-weight: bold;
            color: #ffffff;

            div {
              margin-top: 5px;
              font-size: 0.15rem;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #e7edf2;
            }
          }

          a-progress {
            width: 1rem;
            height: 1rem;
          }
        }

        div.rightItemBox_right {
          .flex(space-between, flex-start, column);
          height: 100%;

          div.rightItemBox_rightTop {
            font-size: 0.16rem;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #e7edf2;
          }

          div.rightItemBox_rightBot {
            flex: 1;
            padding-top: 0.15rem;
            .flex(space-between, flex-start, column);

            div.rightBot_one {
              font-size: 0.2rem;
              font-family: Alimama ShuHeiTi;
              font-weight: bold;
              color: #1ff6fe;

              span {
                font-size: 0.14rem;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #e7edf2;
                margin-left: 0.16rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style lang='less' scoped>
.format-text {
  font-size: 0.18rem;
  //transform: scale(.9);
  color: #fff;
}


.seamless-warp {
  height: 100%;
  overflow: hidden;
}

.ant-progress-text {
  font-size: 0.18rem;
  //color: #ffffff !important;
}

.ant-progress-circle-trail {
  stroke: #0050b2 !important;
  opacity: 0.5
}

div.tableHeaderBox {
  font-size: 0.24rem;
  color: #fff;
  // background: #03548f;
  // 上下渐变
  background: linear-gradient(to bottom, #072c8c, #035690);
  // margin-top: 0.22rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  padding: 0.3rem;
  font-weight: bold;

  div.tableOne {
    width: 3rem;
  }

  div.tableTwo {
    width: 2.2rem;
  }

  div.tableThree {
    width: 2rem;
    margin-right: 0.2rem;
  }

  div.tableFour {
    width: 1.6rem;
    margin-right: 0.2rem;
  }

  div.tableFive {
    width: 2.5rem;
    // width: 1.2rem;
  }

  div.tableSix {
    width: 2.4rem;
    // width: 1.9rem;
  }

  div.tableSeven {
    width: 1.9rem;
    // width: 1.3rem;
  }

  div.tableEight {
    width: 2.6rem;
    // width: 1.3rem;
  }

  div.tableNine {
    flex: 1;
    padding: 0 30px 0 20px;
  }
}

.draggable {
  /* 使文本垂直居中 */
  user-select: none;
  /* 防止元素内容被选中 */
  cursor: move;
  /* 更改鼠标光标为可拖动 */
}

.rowClass {
  color: #fff;
  font-size: 0.22rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  height: 1.2rem;
  padding: 0 0.3rem;
  background-color: rgba(3, 84, 143, .06);

  div.itemBoxOne {
    // width: 2rem;
    width: 3rem;
    font-weight: 500;
  }

  div.itemBoxTwo {
    // width: 2rem;
    width: 2.2rem;
    font-weight: 500;
  }
}

.over-time-style {
  color: #f44747;
  font-size: 0.22rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  background-color: rgba(38, 28, 46, .7);

}

div.itemBoxThree {
  width: 2rem;
  margin-right: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

div.itemBoxFour {
  width: 1.6rem;
  margin-right: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

div.itemBoxFive {
  width: 2.5rem;
  font-weight: 500;
}

div.itemBoxSix {
  width: 2.4rem;
  display: flex;
  font-weight: 500;
}

div.itemBoxSeven {
  width: 1.9rem;
}

div.itemBoxEight {
  width: 2.6rem;
}

.task-box {
  display: flex;
  flex-direction: column;
  &:last-child{
    .process-name {
      margin-right: -15px;
    }
  }
}

.task-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-name {
  margin-left: -15px;
}

div.itemBoxNine {
  flex: 1;
  display: flex;
  overflow-x: auto;
  position: relative;
  padding: 0 40px 0 20px;
  user-select: none;
  // 样式为拖拽
  cursor: grabbing;

  // 隐藏滚动条
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    height: 0 !important;
    background-color: #fff;
  }
}

/* 隐藏滚动条但仍允许滚动 */
.hide-scrollbar {
  /* 允许溢出内容滚动 */
  overflow: -moz-scrollbars-none;
  /* Firefox */
  overflow: hidden;
  /* IE, Edge 和 其它 */
  scrollbar-width: none;
  /* Firefox */
}

/* 当滚动条出现时隐藏轨道 */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

.itemBox .itemBoxNine .ant-progress-inner {
  background-color: transparent !important;
}

.itemBox .itemBoxNine .ant-progress-text {
  display: flex;
  justify-content: center;
}

#prevButton,
#nextButton {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  cursor: pointer;
  padding: 10px;
  color: #fff;
  border: none;
  font-size: 1.2em;
}

#prevButton {
  left: -10px;
}

#nextButton {
  right: -10px;
}

.scrollable-content {
  display: flex;
  /* 让内容成为单个块级元素 */
}
</style>
